<template>
  <div class="monthly-container">
    <div class="filter-container flex-row">
      <el-input
        v-model="tableListQuery.keyword"
        placeholder="请输入搜索内容"
        prefix-icon="el-icon-search"
        style="width:200px;"
        class="filter-item"
        clearable
      />
      <el-button class="filter-item" type="primary" @click="getBillList">搜索</el-button>
      <el-select
        v-model="tableListQuery.billYear"
        filterable
        clearable
        placeholder="请选择账单年度"
        class="filter-item"
        style="width:150px;margin-left:15px;"
        @change="getBillList"
      >
        <el-option
          v-for="item in years"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select
        v-model="tableListQuery.status"
        placeholder="请选择发出状态"
        clearable
        class="filter-item"
        style="width:150px;margin-left:15px;"
        @change="getBillList"
      >
        <el-option label="未发出" :value="0" />
        <el-option label="已发出" :value="1" />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        style="margin-left:auto;"
        @click="addBillClick"
      >新增</el-button>
    </div>
    <annual-table :bill-list="billList" @handleDel="handleDel" @handleEdit="edit" />
    <br>
    <el-pagination
      :v-show="total > 0"
      background
      :current-page="tableListQuery.page"
      :page-sizes="[10, 20, 50,100]"
      :page-size="tableListQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      title=""
      width="1073px"
      custom-class="myDigo inputTop"
      :show-close="false"
      :visible.sync="showAdd"
      :destroy-on-close="true"
      @closed="addDialogClosed"
    >
      <h2 v-if="!isEdit">新增年账单<i class="el-icon-close" @click="close" /></h2>
      <h2 v-if="isEdit">编辑年度账单<i class="el-icon-close" @click="close" /></h2>
      <div class="digoDiv">
        <el-form
          v-if="showAdd"
          ref="billForm"
          :model="billForm"
          :label-position="'left'"
          label-width="72px"
          class="formDiv"
        >
          <el-form-item label="房产">
            <el-select v-model="billForm.houseId" filterable placeholder="请输入关键字：房产（地址/ID）" style="width:100%">
              <el-option
                v-for="item in houseList"
                :key="item.id"
                :label="item.address"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <div class="flex-row borbtoonline">
            <el-form-item label="账单年度：" style="margin-right:20px">
              <el-select v-model="year" filterable placeholder="请选择账单年份" style="width:150px;" @change="yearSelected">
                <el-option
                  v-for="item in years"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="账单周期：">
              <el-date-picker
                v-model="daterange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:260px"
                @change="selectDaterange"
              />
            </el-form-item>
          </div>

          <el-form-item label="账单明细">
            <bill-file-upload
              v-model="billForm.filePath"
              dir="annual"
              name="上传账单"
              :maxcount="10"
              format="png,pdf,jpg,jpeg"
              :urls="billForm.filePath"
              @getFile="getFile"
            />
          </el-form-item>

          <el-form-item label="备注说明">
            <el-input v-model="billForm.remark" :rows="4" type="textarea" placeholder="请输入..." />
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button v-if="!isEdit" plain type="primary" class="dialog-footer-btn white-bg-btn" @click="saveBill">保存</el-button>
        <el-button v-else-if="isEdit && billForm.status === 0" plain type="primary" class="dialog-footer-btn white-bg-btn" @click="editBill(0)">保存</el-button>
        <el-button v-else plain type="primary" class="dialog-footer-btn white-bg-btn" @click="editBill(1)">保存</el-button>
        <el-button v-if="!isEdit" type="primary" class="dialog-footer-btn" @click="sendBill">确认发出</el-button>
        <el-button v-if="isEdit && billForm.status === 0" type="primary" class="dialog-footer-btn" @click="editBill(1)">确认发出</el-button>
        <el-button type="info" class="dialog-footer-btn" @click="close">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title=""
      width="650px"
      custom-class="myDigo inputTop"
      :show-close="false"
      :visible.sync="showDel"
    >
      <h2>确认删除<i class="el-icon-close" @click="showDel = false" /></h2>
      <div class="digoDiv">
        <div class="dialog-content flex-row">
          <svg-icon class="warning-icon" icon-class="warning" /><span class="dialog-tip-text">确认删除该条年账单吗？</span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" class="dialog-footer-btn" @click="delBill(tempBillId)">确认</el-button>
        <el-button type="info" class="dialog-footer-btn" @click="showDel = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { pageByOperation } from '@/api/house'
import { getYearList, getYear, yearToDate } from '@/utils/common'
import { addBill, getYearBillList, delBill, billDetail, editBill } from '@/api/billing'
import AnnualTable from './AnnualTable.vue'
import BillFileUpload from '@/components/Upload/BillFileUpload.vue'
export default {
  components: { AnnualTable, BillFileUpload },
  data() {
    return {
      years: getYearList(),
      daterange: [],
      year: '',
      houseList: [],
      extraData: {},
      houseListQuery: {
        page: 1,
        limit: 10000
      },
      listQuery: {
        keyword: undefined,
        month: undefined,
        property: undefined,
        status: undefined
      },
      billList: [],
      tableListQuery: {
        page: 1,
        limit: 10,
        keyword: undefined,
        billYear: undefined,
        status: undefined
      },
      loading: false,
      total: 0,
      showAdd: false,
      showDel: false,
      isEdit: false,
      defaultForm: {
        type: 1,
        houseId: '',
        billDate: '',
        beginDate: '',
        endDate: '',
        remark: '',
        filePath: '',
        status: 0
      },
      billForm: {
        type: 1,
        houseId: '',
        billDate: '',
        beginDate: '',
        endDate: '',
        remark: '',
        filePath: '',
        status: 0
      },
      tempBillId: undefined
    }
  },
  created() {
    this.getBillList()
  },
  methods: {
    async addBillClick() {
      await this.getHouseList()
      this.showAdd = true
    },
    close() {
      this.showAdd = false
    },
    addDialogClosed() {
      this.billForm = { ...this.defaultForm }
      this.daterange = []
      this.year = ''
      this.isEdit = false
    },
    getBillList() {
      this.loading = true
      getYearBillList(this.tableListQuery).then(response => {
        this.billList = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.tableListQuery.page = 1
      this.tableListQuery.limit = val
      this.getBillList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.tableListQuery.page = val
      this.getBillList()
    },
    selectHouse(val) {
      console.log(val)
    },
    selectDaterange(list) {
      this.billForm.beginDate = list[0]
      this.billForm.endDate = list[1]
    },
    yearSelected(val) {
      const year = val.split('-')[0]
      this.billForm.billDate = yearToDate(year)
      console.log(this.billForm.billDate)
    },
    async getHouseList() {
      const res = await pageByOperation(this.houseListQuery)
      if (res.code === 200) {
        this.houseList = res.data.records
      }
    },
    saveBill() {
      this.billForm.status = 0
      addBill(this.billForm).then(response => {
        this.showAdd = false
        this.getBillList()
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    sendBill() {
      this.billForm.status = 1
      addBill(this.billForm).then(response => {
        this.showAdd = false
        this.getBillList()
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    editBill(status) {
      this.billForm.status = status
      editBill({ ...this.billForm, id: this.tempBillId }).then(response => {
        this.showAdd = false
        this.getBillList()
        this.$notify({
          title: '成功',
          message: '编辑成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleDel(id) {
      this.showDel = true
      this.tempBillId = id
    },
    delBill(id) {
      delBill(id).then(response => {
        this.showDel = false
        this.getBillList()
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    billDetail(id) {
      billDetail(id).then(response => {
        console.log(response)
      })
    },
    async edit(id) {
      const res = await billDetail(id)
      if (res.code === 200) {
        this.tempBillId = id
        this.isEdit = true
        await this.getHouseList()
        Object.keys(this.billForm).map(i => {
          this.billForm[i] = res.data[i]
        })
        this.year = getYear(res.data.billDate)
        this.daterange = [this.billForm.beginDate, this.billForm.endDate]
        this.showAdd = true
      }
    },
    getFile(val) {
      console.log('val.toString():', val.toString())
      this.billForm.filePath = val.toString()
    }
  }
}
</script>

<style lang="scss" scoped>
.monthly-container {
  padding-right: 10px;
}

.bill-overview {
  height: 20px;
  color: rgb(140, 140, 140);
  font-size: 14px;
}

.dollar {
  display: inline-block;
  padding: 0 8px;
  color: #101010;
  font-size: 12px;
  font-weight: normal;
}

.myDigo h2 {
  height: 32px;
  background: #343436;
}

.form-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

::v-deep .myDigo .el-dialog__footer {
  background: #e5e9ed;
  padding-top: 20px;
}

::v-deep .el-dialog.myDigo .el-dialog__body {
  padding: 0;
}

::v-deep .el-dialog.myDigo .el-dialog__header {
  display: none;
}

.el-dialog.myDigo h2 {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 39px;
  padding-right: 39px;
  color: #fff;
  font-size: 18px;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
  font-weight: normal;
  font-family: "SourceHanSansSC-regular";
}

.el-dialog.myDigo h2 i {
  font-size: 26px;
  cursor: pointer;
}

::v-deep .el-dialog.myDigo .el-dialog__body {
  text-align: left;
}

.digoDiv ::v-deep .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
    text-indent: 5px;
}

::v-deep .inputTop input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
  font-size: 12px;
}

::v-deep .inputTop input:-moz-placeholder,
textarea:-moz-placeholder,
select::-webkit-input-placeholder {
  font-size: 12px;
}

::v-deep .inputTop input::-moz-placeholder,
textarea::-moz-placeholder,
select::-webkit-input-placeholder {
  font-size: 12px;
}

::v-deep .inputTop input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select::-webkit-input-placeholder {
  font-size: 12px;
}

::v-deep .el-form-item {
  margin-bottom: 16px;
}

::v-deep .el-form-item--medium .el-form-item__label {
  color: #101010;
  font-size: 12px;
  font-weight: bold;
}

.nonbg-btn {
  background: none;
}

.mtright {
  margin-right: 11px;
}

.formDiv {
  padding-left: 39px;
  padding-right: 39px;
  overflow: hidden;
}

.borbtoonline {
  padding-bottom: 20px;
  margin-bottom: 20px;
  position: relative;
}

.borbtoonline::after {
  content: "";
  position: absolute;
  left: -51px;
  bottom: 0;
  width: 111%;
  height: 1px;
  background: #f0f0f0;
}

.borbtoonline .el-form-item {
  margin-bottom: 0;
}

.el-icon-remove-outline {
  margin-left: 20px;
  display: inline-block;
  color: #5AC6B7;
  font-weight: bold;
  transform: scale(1.5);
}

.white-bg-btn {
  background: #fff;
}

.dialog-footer-btn {
  width: 100px;
}

.form-note-text {
  font-size: 12px;
  font-weight: bold;
  color: #101010;
}

.dialog-content {
  height: 150px;
  padding: 0 60px;
  align-items: center;
}

.warning-icon {
  margin-right: 20px;
  height: 24px;
  width: 24px;
  fill: #F45656;
}

.dialog-tip-text {
  display: inline-block;
  font-size: 18px;
  height: 24px;
  line-height: 24px;
  color: rgba(28, 28, 28, 100);
}
</style>
